<template>
  <el-card>
    <el-container class="item-container">
      <el-aside class="left-container">
        <el-image
          class="image-title"
          @click="onTitlePicClick(blogItem)"
          :src="blogItem.titlePic"
          fit="cover">
        </el-image>
      </el-aside>
      <el-container class="right-container">
        <el-header style="height: 20%">
          <el-button type="text" class="title-text" @click="onTitleClick(blogItem)" show-overflow-tooltip>
            {{ blogItem.title }}
          </el-button>
        </el-header>
        <el-icon></el-icon>
        <el-main style="height: 20%">
          <span class="summary-span">{{ blogItem.summary }}</span>
        </el-main>
        <el-footer style="height: 20%">
          <el-row>
            <el-col :span="12">
              <el-button plain icon="el-icon-user-solid" class="text-btn"
                         show-overflow-tooltip>
                {{ blogItem.author }}
              </el-button>
            </el-col>
            <el-col :span="4">
              <el-button plain icon="el-icon-view" class="text-btn">{{ blogItem.clickCount }}</el-button>
            </el-col>
            <el-col :span="8">
              <el-button plain icon="el-icon-time" class="text-btn">{{ blogItem.updateTime|formatDate }}</el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </el-card>
</template>

<script>

export default {
  name: 'BlogListItem',
  props: ['blogItem'],
  data () {
    return {}
  },
  methods: {
    onTitleClick (blogItem) {
      const routerPath = this.$router.resolve({
        path: '/blog-detail',
        query: {
          blogId: blogItem.id
        }
      })
      window.open(routerPath.href, '_blank')
    },
    onTitlePicClick (blogItem) {
      const routerPath = this.$router.resolve({
        path: '/blog-editor',
        query: {
          blogId: blogItem.id
        }
      })
      window.open(routerPath.href, '_blank')
    }
  }
}
</script>

<style>
.item-container {
  width: 100%;
  height: 180px;
  /*padding: 5px;*/
  /*border: 1px solid black;*/
  /*border-radius: 10px;*/
  /*background-color: #2c3e50;*/
}

.left-container {
  background-color: #2c3e50;
  /*align-items: center;*/
  /*background-color: aqua;*/
}

.right-container {
  /*background-color: burlywood;*/
}

.image-title {
  background-color: white;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.title-text {
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.text-btn {
  border: none;
  background: rgb(0, 0, 0, 0);
}

.summary-span {
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

</style>
